<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
</head>

<body>
    <!-- 
        1.vue中常见的按键别名：
        回车 => enter
        删除 => delect（捕获“删除”和“退格”键）
        退出 => esc
        空格 => space
        换行 => tap（特殊，必须配合keydown ）
        上 => up
        下 => down
        左 => left
        右 => right 

        2.vue中未提供别名的按键，可以使用按键原始的key值去绑定，但是要注意转为kebab-case（短横线命名）

        3.系统修饰键（用法特殊）ctrl alt shift meta
                (1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
                (2)配合keydown使用:正常触发使用


        4.也可以使用keyCode去指定具体的按键

        5.Vue.config.keyCodes.自定义别名 =键码，可以定制按键别名         -->
    <!--准备好一个容器-->
    <div id="app">
        <h2>欢迎来到{{name}}</h2>
        <input type="text" placeholder="按下回车输入提示信息" @keyup.enter="showInfo">
    </div>
    <!--引入vue-->
    <script src="../../vue.js/vue.js"></script>
    <script>
 Vue.config.productionTip=false//阻止vue在启动时候生成生产提示
        var app = new Vue({
            el: "#app",
            data: {
                name:"gdcp"
            },
            methods: {
                showInfo(e){
                   
                    // if(e.keyCode != 13)return 
                    console.log(e.target.value)
                }

            }
        });
    </script>
</body>

</html>
